<template>
	<view class="content">
		<u-navbar placeholder title="景点" @leftClick="back" leftIconColor="#FC2530">
			<!-- <view slot="center" style="width: 550rpx;">
				<u-search placeholder="日照香炉生紫烟" height="30" :showAction="false" bgColor="#FFEFE6"></u-search>
			</view> -->
		</u-navbar>
		<u-tabs :list="list4" lineWidth="30" lineColor="#FC2530" @change='scollSwiper' :current="current" :activeStyle="{
		            color: '#303133',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>
		<sclist :dataList="data" ref="sclist1"></sclist>
	</view>
</template>

<script>
	import sclist from "./components/list.vue"
	export default {
		components: {
			sclist
		},
		data() {
			return {
				data: [],
				data0: [],
				data1: [],
				data2: [],
				data3: [],
				data4: [],
				current: 0,
				list4: [{
					name: '山地型'
				}, {
					name: '草原型',

				}, {
					name: '森林型',
				}, {
					name: '湿地型'
				}, {
					name: '海洋型'
				}],
			}
		},
		onLoad(options) {
			if (options.index) {
				this.current = options.index
			}
		},
		onShow() {

		},
		mounted() {
			this.getScenicList()
		},
		methods: {
			getScenicList() {
				this.$api({
					url: '/customer/getScenicList',
					methods: 'get',
				}).then((res) => {
					for (let s of res.data) {
						switch (s.scenicBase.typeName) {
							case '山地型':
								this.data0.push(s)
								break;
							case '草原型':
								this.data1.push(s)
								break;
							case '森林型':
								this.data2.push(s)
								break;
							case '湿地型':
								this.data3.push(s)
								break;
							case '海洋型':
								this.data4.push(s)
								break;
						}
					};
					this.setData(this.current)
				})
			},
			setData(index) {
				if (index == 0) {
					this.data = this.data0
				} else if (index == 1) {
					this.data = this.data1
				} else if (index == 2) {
					this.data = this.data2
				} else if (index == 3) {
					this.data = this.data3
				} else if (index == 4) {
					this.data = this.data4
				}
			},
			scollSwiper(e) {
				this.current = e.index
				this.setData(this.current)
			},
			back() {
				uni.navigateBack({
					delta: 2
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.recommend {
			padding: 0 30rpx;

			.list {
				padding-top: 30rpx;

				.item_body {
					display: flex;

					.body_right {
						width: 100%;
						padding: 0 25rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}
				}
			}
		}
	}
</style>
